<template>
	<u-popup
		v-model="feedRecordShow"
		mode="center"
		:mask-close-able="false"
		class="chicken-edit">
		<view class="box">
			<view
				class="info-box"
				:class="{
					change: tabIndex == 2
				}">
				<view class="info-title">
					<view
						:class="{ choose: tabIndex == 1 }"
						@click="changeTab(1)">饲料记录</view>
					<view
						:class="{ choose: tabIndex == 2 }"
						@click="changeTab(2)">饲料转增</view>
				</view>
				<view class="info-list" v-if="tabIndex == 1">
					<scroll-view
						scroll-y
						@scrolltolower="scrolltolower"
						class="center">
						<view class="all">
							<view>总获得<text>1524g</text></view>
							<view>
								<text>已使用580g</text>
								<text>剩余580g</text>
							</view>
						</view>
						<view class="filter">
							<view @click="showCalendar = !showCalendar">
								<text>{{ startDate }}~{{ endDate }}</text>
								<u-icon
									class="my-icon"
									size="16"
									name="play-left-fill"></u-icon>
							</view>
							<view @click="showSelect = !showSelect">
								{{ chooseFilter.label }}
							</view>
						</view>
						<view
							v-for="(val, index) in conversionList"
							:key="index"
							class="list-item">
							<view class="item-left">
								<view>{{ val.title }}</view>
								<view>{{ val.time }}</view>
							</view>
							<view class="item-right">-{{ val.num }}</view>
						</view>
					</scroll-view>
					<view class="list-tip">
						下拉展示更多
						<u-icon
							class="tip-icon"
							size="18"
							name="arrow-left-double"></u-icon>
					</view>
				</view>
				<view class="info-list" v-else>
					<scroll-view
						scroll-y
						@scrolltolower="scrolltolowerout"
						class="center pd">
						<view class="out-title">
							可选择以下好友头像进行饲料转增，一次可转赠10人
						</view>
						<view class="pd-box">
							<view
								v-for="(val, index) in friendList"
								:key="index"
								@click="feedOut(val, index)"
								class="list-item-out">
								<image
									src="/static/images/chicken/friend_default.png"
									mode="widthFix"></image>
								<view class="out-btn">
									<text>转增</text>
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="list-tip">
						下拉展示更多
						<u-icon
							class="tip-icon"
							size="18"
							name="arrow-left-double"></u-icon>
					</view>
				</view>
			</view>
			<image
				class="close"
				@click="changeShow"
				src="/static/images/chicken/exchange_close.png"
				mode="widthFix"></image>
		</view>
		
		<!-- 日历选择 -->
		<u-calendar
			v-model="showCalendar"
			class="my-time"
			@change="changeTime"
			mode="range"></u-calendar>
		<!-- 筛选 -->
		<u-select
			v-model="showSelect"
			class="my-time"
			@confirm="filterSubmit"
			:list="filterList"></u-select>
	</u-popup>
</template>

<script>
	import dayjs from 'dayjs';
	
	export default {
		name: 'myFriend',
		props: {
			feedRecordShow: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				tabIndex: 2,
				showCalendar: false, // 日历选择
				showSelect: false, // 条件筛选
				startDate: '',
				endDate: '',
				chooseFilter: {},
				filterList: [
					{
						value: '1',
						label: '全部',
					},
					{
						value: '2',
						label: '喂食',
					},
					{
						value: '3',
						label: '饲料任务',
					},
					{
						value: '4',
						label: '饲料转赠',
					},
				],
				conversionList: [
					{
						title: '兑换xxx物品',
						num: '3',
						time: '2023-11-15 15:00:00',
					},
					{
						title: '兑换xxx物品',
						num: '3',
						time: '2023-11-15 15:00:00',
					},
					{
						title: '兑换xxx物品',
						num: '3',
						time: '2023-11-15 15:00:00',
					},
					{
						title: '兑换xxx物品',
						num: '3',
						time: '2023-11-15 15:00:00',
					},
					{
						title: '兑换xxx物品',
						num: '3',
						time: '2023-11-15 15:00:00',
					},
					{
						title: '兑换xxx物品',
						num: '3',
						time: '2023-11-15 15:00:00',
					},
					{
						title: '兑换xxx物品',
						num: '3',
						time: '2023-11-15 15:00:00',
					},
					{
						title: '兑换xxx物品',
						num: '3',
						time: '2023-11-15 15:00:00',
					},
				],
				
				friendList: [
					{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},
					{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},
				],
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				this.startDate = dayjs().format('YYYY-MM-DD');
				this.endDate = dayjs().format('YYYY-MM-DD');
				this.chooseFilter = this.filterList[0];
			},
			changeShow() {
				this.$emit('changeShow', 'feedRecordShow');
			},
			scrolltolower() {
				console.log(1111111111);
			},
			scrolltolowerout() {
				console.log(22222222);
			},
			changeTab(val) {
				this.tabIndex = val;
			},
			changeTime(val) {
				console.log(val);
				this.startDate = val.startDate;
				this.endDate = val.endDate;
			},
			filterSubmit(val) {
				console.log(val);
				this.chooseFilter = val[0];
			},
			feedOut(val, index) {
				let content = `是否转增${ index }？`
				uni.showModal({
					content,
					success: res => {
						if (res.confirm) {
							console.log('转增', index, this);
						}
					},
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
.chicken-edit {
	.my-time {
		::v-deep .u-drawer-bottom{
			background-color: #fff !important;
		}
	}
	.box {
		position: relative;
		width: 100%;
		padding: 30rpx;
		.info-box {
			width: 690rpx;
			height: 1120rpx;
			// background: #f0d9ad;
			background: url('/static/images/chicken/dialog/record_left.png') no-repeat center top;
			background-size: 100%;
			// border: 8rpx solid #df8934;
			border-radius: 30rpx;
			color: #732011;
			&.change {
				background-image: url('/static/images/chicken/dialog/record_right.png');
			}
			.info-title {
				display: flex;
				align-items: center;
				padding: 70rpx 32rpx 38rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: bold;
				view {
					width: 50%;
					color: #AB6036;
					text-align: center;
					&.choose {
						color: #732011;
					}
				}
			}
			.info-list {
				position: relative;
				width: 630rpx;
				height: 938rpx;
				margin: auto;
				padding: 10rpx 0 40rpx;
				background-color: #FBEDD3;
				// border: 2rpx solid #e9be7f;
				border-radius: 20rpx;
				.all {
					display: flex;
					justify-content: space-between;
					align-items: center;
					box-sizing: border-box;
					padding: 18rpx 32rpx;
					view:first-of-type {
						font-size: 32rpx;
						font-weight: bold;
					}
					view:last-of-type {
						font-size: 24rpx;
						opacity: .6;
						text:last-of-type {
							margin-left: 30rpx;
						}
					}
				}
				.filter {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 22rpx 32rpx;
					background-color: #F5E3C0;
					font-size: 24rpx;
					.my-icon {
						margin-left: 10rpx;
						transform: rotate(-90deg);
					}
				}
				.out-title {
					margin: 30rpx 0;
					font-size: 24rpx;
					color: #A37564;
				}
				.center {
					height: 100%;
					box-sizing: border-box;
					&.pd {
						padding-left: 32rpx;
						padding-right: 32rpx;
					}
					.list-item {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 30rpx 32rpx;
						border-bottom: 2rpx solid #E9BE7F;
						.item-left {
							view:first-of-type {
								margin-bottom: 22rpx;
								font-weight: bold;
							}
							view:last-of-type {
								font-size: 24rpx;
								opacity: .7;
							}
						}
						.item-right {
							font-size: 32rpx;
							color: #249A19;
							font-weight: bold;
						}
					}
					.pd-box {
						display: flex;
						flex-wrap: wrap;
					}
					.list-item-out {
						display: flex;
						flex-direction: column;
						align-items: center;
						width: 25%;
						margin-bottom: 40rpx;
						.out-btn {
							position: relative;
							z-index: 1;
							width: 100rpx;
							height: 50rpx;
							line-height: 48rpx;
							background: url('/static/images/chicken/dialog/record_btn.png') no-repeat center center;
							background-size: 100% 100%;
							margin: -25rpx auto 0;
							text-align: center;
							font-size: 24rpx;
							color: #fff;
						}
						image {
							width: 113rpx;
						}
					}
				}
				.list-tip {
					position: absolute;
					left: 0;
					bottom: 0;
					z-index: 2;
					display: flex;
					justify-content: center;
					align-items: flex-end;
					width: 100%;
					height: 90rpx;
					padding-bottom: 20rpx;
					background: linear-gradient(0deg,#fbedd3 0%, rgba(251,237,211,0.69) 81%, rgba(251,237,211,0.00) 100%);
					border-radius: 20rpx;
					font-size: 24rpx;
					color: #A37564;
					.tip-icon {
						margin-left: 8rpx;
						padding-bottom: 4rpx;
						transform: rotate(-90deg);
					}
				}
			}
		}
		
		.close {
			position: absolute;
			right: 10rpx;
			top: 5rpx;
			z-index: 11;
			width: 60rpx;
		}
	}
}
</style>